<template>
  <div class="column-item">
    <div class="column-info">
      <span class="column-type">{{columnType}}</span>
      <span class="column-title">{{column.title}}</span>
      <span class="column-subscription">{{column.subscribeCount}} 人订阅</span>
      <span class="column-status">{{columnStatus}}</span>
    </div>
    <div class="column-operation">
      <div @click="altClick" class="operation-btn">
        <span class="icon iconfont">&#xe651;</span>
        <span class="word">专栏修改</span>
      </div>
      <div @click="viewClick" class="operation-btn">
        <span class="icon iconfont">&#xe72a;</span>
        <span class="word">专栏预览</span>
      </div>
      <div @click="operationClick" class="operation-btn">
        <span class="icon iconfont">&#xe60a;</span>
        <span class="word">内容管理</span>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'columnItem',
  props:["column"],
  computed:{
    columnType() {
      let typeMap = {
        "1":"期刊专栏",
        "2":"课程专栏"
      };

      return typeMap[this.column.type];
    },
    columnStatus() {
      let statusMap = {
        "0":"草稿",
        "1":"未发布",
        "2":"已发布",
        "6":"废弃",
        "9":"下线"
      };

      return statusMap[this.column.status];
    }
  },
  methods:{
    altClick() {
      const id = this.column.id;
      this.$store.dispatch('editInfo', id).then((data) => {
        this.$store.dispatch('setColumnStatus', this.column.status);//存储当前专栏状态
        if(this.column.status == 0 || this.column.status == 1){//课程包信息可修改
          data.coursePacketId && this.$store.dispatch('editPrice', data.coursePacketId).then(() => {},()=>{})
        }
        this.$router.push('/columns/create/info/'+this.column.type);
      }).catch((e) => {
        console.log(e);
      });
    },
    operationClick() {
      const id = this.column.id;
      const coursePacketId = this.column.coursePacketId;
      this.$router.push(`/columns/journal/${id}/${coursePacketId}/`);
    },
    viewClick() {
      let viewWidth = 900,
          viewHeight = 800;

      let offsetLeft = (window.screen.availWidth - viewWidth)/2,
          offsetTop = (window.screen.availHeight - 30 - viewHeight)/2;

      window.open("http://"+this.column.pageUrl,"",`height=${viewHeight},width=${viewWidth},top=${offsetTop},left=${offsetLeft},status=no,toolbar=no,menubar=no,location=no`);
    }
  }
};
</script>

<style lang="less" rel="stylesheet/less" scoped>
@font-face {
  font-family: "iconfont";
  src: url('../../../font/create-iconfont.eot?t=1476171328');
  /* IE9*/
  src: url('../../../font/create-iconfont.eot?t=1476171328#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../../../font/create-iconfont.woff?t=1476171328') format('woff'), /* chrome, firefox */
  url('../../../font/create-iconfont.ttf?t=1476171328') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('../../../font/create-iconfont.svg?t=1476171328#iconfont') format('svg');
  /* iOS 4.1- */
}
.column-item{
  width: 100%;
  height: 220px;
  margin-bottom: 50px;
  background: #91c4a6;
  .column-info{
    width: 530px;
    height: 100%;
    float: left;
    padding: 25px;
    box-sizing:border-box;
    position: relative;
    &:after{
      content:"";
      display: inline-block;
      width: 1px;
      height: 140px;
      background: #fff;
      position: absolute;
      right: 0;
      top: 40px;
    }
    span{
      color: #eeeeee;
      display: block;
    }
    .column-type{
      font-size: 22px;
      color: #2f7f50;
      font-weight: bold;
      opacity: .8;
    }
    .column-title{
      font-size: 32px;
      line-height: 150%;
    }
    .column-subscription{
      font-size: 20px;
    }
    .column-status{
      width: 100px;
      background: rgba(255,255,255,.3);
      font-size: 23px;
      margin-top: 30px;
      position: absolute;
      left: 25px;
      bottom: 25px;
      line-height: 40px;
      text-align: center;
      color: #eee;
      border-radius: 10px;
    }
  }
  .column-operation{
    width: 430px;
    box-sizing:border-box;
    float: left;
    height: 100%;
    padding: 40px 20px;
    .operation-btn{
      width: 130px;
      padding: 20px 0;
      float: left;
      text-align: center;
      cursor: pointer;
      &:hover{
        background:rgba(255,255,255,.1);
      }
      .iconfont{
        display: block;
        color: #fff;
        font-size: 60px;
      }
      .word{
        display: block;
        color: #fff;
        font-size: 20px;
        margin-top: 10px;
      }
    }
  }
}
</style>
